<template>
	<view>
		<view class="head">
			<view class="userInfo">
				<text class="name">{{userInfo.nickname || userInfo.username || "未登录"}}</text>
				<view class="userInfo-right">
					<view class="teacher">
						<text>我的专属导师 ></text>
					</view>
					<view class="headImage">
						<view></view>
						<image :src="userInfo.head" mode=""></image>
					</view>
				</view>
			</view>
			<view class="read">
				<image></image>
			</view>
			<view class="invite">
				<text>再邀请{{data.invite}}人成为会员</text>
				<view class="invite-btn" @click="handleinvite">
					<text class="invite-btn-text">邀请粉丝</text>
				</view>
			</view>
		</view>
		<view class="profitView">
			<view style="margin-top: 15px;">
				<text style="font-size: 14px;">今日预估收益</text>
			</view>
			<view style="margin-top: 10px;">
				<text style="font-size: 16px;color: red;">¥{{data.today_yugu}}</text>
			</view>
			<view class="profit-detail">
				<view class="profit-left">
					<text class="profit-title">今日订单</text>
					<text class="profit-data">{{data.today_order_num}}</text>
					<view class="profit-list-btn" @click="toOrderDetail">
						<text>订单列表</text>
					</view>
				</view>
				<view class="profit-left">
					<text class="profit-title">累计收益</text>
					<text class="profit-data">¥{{data.prize}}</text>
					<view class="profit-list-btn" @click="toProfitDetail">
						<text>收益详情</text>
					</view>
				</view>
			</view>
		</view>
		<view class="line"></view>
		
		<view class="news">
			<view class="con">
				<image src="../../../static/fanli/317.png" mode="" class="icon"></image>
				
				<swiper 
					:indicator-dots="false" 
					:autoplay="true" 
					:duration="300"
					:interval="2000"
					:vertical="true"
					class="swiper"
				>
					<swiper-item v-for="(item, index) in buyList" :key="index">
						<view class="swiper-item info">
							<text>用户{{item.name}}刚收获{{item.num}}元推广收益</text>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		
		<view class="chartsbox">
			<view class="choose">
				<view class="li" :class="currentTime == 0 ? 'current' : ''" @click="onDateSelectClick(0)">近7天</view>
				<view class="li" :class="currentTime == 1 ? 'current' : ''" @click="onDateSelectClick(1)">30天</view>
				
				<view class="li last" :class="currentTime == 2 ? 'current' : ''" @click="onShowDatePicker">{{rangeText}}</view>
			</view>
			
			<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" @touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
		</view>
		
		<view style="width: 100%;height: 10px;background-color: rgb(247,248,249);"></view>
		
		<view class="fanView">
			<view class="fan-head">
				<view>
					<text class="fan-title">我的粉丝</text>
				</view>
				<view>
					<text class="fan-btn" @click="fanClick">查看更多 ></text>
				</view>
			</view>
			<view class="fan-detail">
				<view class="fan-a">
					<view>
						<text class="fan-a-title">今日新增粉丝</text>
					</view>
					<view>
						<text class="fan-a-count">{{data.new}}</text>
					</view>
				</view>
				
				<view class="fan-a">
					<view>
						<text class="fan-a-title">粉丝总数</text>
					</view>
					<view>
						<text class="fan-a-count">{{data.fensi}}</text>
					</view>
				</view>
				
				<view class="fan-a">
					<view>
						<text class="fan-a-title">会员总数</text>
					</view>
					<view>
						<text class="fan-a-count">{{data.vip}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<mx-date-picker 
			:show="showRangePicker" 
			:type="'range'"
			:show-tips="false" 
			:begin-text="'开始'" 
			:end-text="'结束'" 
			:show-seconds="false" 
			@confirm="onDatePickerSelected"
			@cancel="onDatePickerCancel"
		/>
	</view>
</template>

<script>
	import {
		JSMRequest
	} from '@/module/api'
	import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js';
	import  { isJSON } from '@/common/util';
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker"
	var canvaLineA=null;
	var lastMoveTime=null;//最后执行移动的时间戳
	export default {
		data() {
			return {
				data:null,
				dateList:[],
				priceList:[],
				buyList:[
					{
						name:'hahaha',
						num:'333',
					},
					{
						name:'xixiix',
						num:'444',
					},
					{
						name:'lalala',
						num:'555',
					}
				],
				cWidth: 0,
				cHeight: 0,
				pixelRatio: 1,
				showRangePicker: false,
				rangeText: "选择日期时间",
				currentTime: 0
			}
		},
		
		onLoad() {
			
			this.getMemberData()
			
			// http://doc.ucharts.cn/1074673 
			// 具体参数详见API参数章节
			let _t = this
			
			// this.cWidth=uni.upx2px(750);
			// this.cHeight=uni.upx2px(500);
			
			let chartData = {
				categories: this.dateList,
				series: [{
					name: '日预估总收益',
					data: this.priceList,
					color: '#FF3660'
				}]
			}
			
			canvaLineA= new uCharts({
				$this: this,
				canvasId: "canvasColumn",
				type: 'line',
				legend: true,
				fontSize: 10,
				background:'#FFFFFF',
				pixelRatio: 1,
				animation: true,
				categories: chartData.categories,
				series: chartData.series,
				xAxis: {
					type:'grid',
					gridColor:'#CCCCCC',
					gridType:'dash',
					dashLength:8
				},
				yAxis: {
					disableGrid: true,
					format:(val)=>{return val.toFixed(0)+'元'}
				},
				dataLabel: true,
				width: 375,
				height: 250,
				extra: {
					line:{
						type: 'straight'
					}
				}
			})
		},
		
		components: {
			MxDatePicker
		},
		
		computed: {
			userInfo () {
				return this.$store.state.userInfo
			}
		},
		
		methods: {
			
			toOrderDetail(){
				uni.navigateTo({
					url:'../../../pageMe/me/order-list/order-list'
				})
			},
			
			toProfitDetail(){
				uni.navigateTo({
					url:'../../../pageMe/new/profitDetail/profitDetail'
				})
			},
			
			getMemberData(){
				let _t = this				
				JSMRequest({
					tag: "jsm-user-dist",
					method: "POST",
					params: {
						'begin_time':'',
						'end_time':''
					}
				}).then(({data}) => {
					_t.data = data
					var dateList = []
					var priceList = []
					for(var i = 0; i < data.yugu_list.length; i++) {
						dateList.push(data.yugu_list[i].time)
						priceList.push(data.yugu_list[i].money)
					};
					console.log(data)
					console.log(dataList)
					console.log(priceList)
					_t.dateList = dateList
					_t.priceList = priceList
				}).catch(e => {
					
				})
			},
			
			fanClick(){
				uni.navigateTo({
					url:'../../../pageMe/new/fans/fans'
				})
			},
			
			handleinvite () {
				if(this.userInfo == null){
					uni.navigateTo({
						url: "/pages/index/index"
					})
				}else{
					
					// 绑定邀请码
					if(!this.userInfo.parent){
						return uni.navigateTo({
							url: "/pageMe/me/bind-invite/bind-invite"
						})
					}
					
					uni.navigateTo({
						url: "/pageMe/me/invite-friends/invite-friends"
					})
				}
			},
				
			touchLineA(e) {
				lastMoveTime = Date.now();
			},
			moveLineA(e){
				let currMoveTime = Date.now();
				let duration = currMoveTime - lastMoveTime;
				if (duration < Math.floor(1000 / 60)) return;//每秒60帧
				lastMoveTime = currMoveTime;
				
				let currIndex=canvaLineA.getCurrentDataIndex(e);
				if(currIndex>-1&&currIndex<canvaLineA.opts.categories.length){
					let riqi=canvaLineA.opts.categories[currIndex];
					let leibie=canvaLineA.opts.series[0].name;
					let shuju=canvaLineA.opts.series[0].data[currIndex];
					this.Interactive=leibie+':'+riqi+'-'+shuju+'元';
				}
				canvaLineA.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
			touchEndLineA(e){
				let currIndex=canvaLineA.getCurrentDataIndex(e);
				if(currIndex>-1&&currIndex<canvaLineA.opts.categories.length){
					let riqi=canvaLineA.opts.categories[currIndex];
					let leibie=canvaLineA.opts.series[0].name;
					let shuju=canvaLineA.opts.series[0].data[currIndex];
					this.Interactive=leibie+':'+riqi+'-'+shuju+'元';
				}
				canvaLineA.touchLegend(e);
				canvaLineA.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
			changeData(){
				if(isJSON(_self.textarea)){
					let newdata=JSON.parse(_self.textarea);
					canvaLineA.updateData({
						series: newdata.series,
						categories: newdata.categories
					});
				}else{
					uni.showToast({
						title:'数据格式错误',
						image:'../../../static/images/alert-warning.png'
					})
				}
			},
			
			onDatePickerSelected ({date, value}) {
				// console.log(e)
				this.rangeText = `${value[0]}至${value[1]}`
				this.onDateSelectClick(2)
				this.onDatePickerCancel()
			},
			
			onShowDatePicker () {
				this.showRangePicker = true
			},
			
			onDatePickerCancel () {
				this.showRangePicker = false
			},
			
			onDateSelectClick (index) {
				this.currentTime = index
			}
		}
	}
</script>

<style lang="less">
.head {
	.userInfo {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 0 30px;
		box-sizing: border-box;
		
		.name {
			font-size: 32px;
		}
		
		.userInfo-right {
			
			.teacher {
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 10px 30px 10px 30px;
				background-color: rgb(255, 234, 230);
				margin-top: 10px;
				margin-right: -30px;
				border-radius: 30px 0 0 30px;
				
				text{
					font-size: 28px;
				}
			}
			
			.headImage {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				
				image {
					width: 90px;
					height: 90px;
					background-color: #f2f2f2;
					border-radius: 45px;
					border-width: 2px;
					border: 4px solid #fff;
				}
			}
		}
	}
	
	.read {
		width: 100%;
		height: 130px;
		box-sizing: border-box;
		padding: 0 30px;
		image {
			width: 100%;
			height: 100%;
			background-color: #f1f1f1;
			border-radius: 10px;
		}
	}
	.invite {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80px;
		background-color: rgb(255, 234, 230);
		border-radius: 10px;
		margin: 20px 30px 0;
		padding: 0 20px;
		text {
			font-size: 24px;
			color: red;
		}
		.invite-btn {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			background-color: red;
			margin-left: 20px;
			height: 50px;
			width: 150px;
			border-radius: 25px;
			.invite-btn-text {
				color: white;
				font-size: 24px;
			}
		}
	}
}

.profitView {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		border-top: 20px solid #f1f1f1;
		margin-top: 30px;
		.profit-detail {
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
			.profit-left {
				width: 50%;
				display: flex;
				flex-direction: column;
				align-items: center;
				align-content: center;
				padding-top: 40px;
				padding-bottom: 30px;
				.profit-title {
					font-size: 28px;
					
					color:gray;
				}
				.profit-data {
					font-size: 28px;
				}
				.profit-list-btn {
					font-size: 24px;
					color: red;
					padding: 10px 20px 10px 20px;
					background-color: rgb(246, 230, 230);
					margin-top: 20px;
				}
			}
		}
	}
	
.line {
	width: 90%;
	height: 1px;
	background-color: rgb(240,240,240);
	margin-left: 5%;
}

.news{
		background: #FFFFFF;
		// padding: 30px 30px 0;
		position: relative;
		z-index: 1;
		
		.con{
			width: 100%;
			height: 76px;
			background: #FFFFFF;
			// box-shadow: 0px 4px 20px 0px rgba(201,211,235,0.33);
			// border-radius: 12px;
			display: flex;
			align-items: center;
			
			.icon{
				width: 32px;
				height: 32px;
				margin-left: 20px;
			}
			
			.swiper{
				width: 562px;
				height: 76px;
			}
			
			.info{
				display: flex;
				align-items: center;
				padding-left: 20px;
				margin-left: 20px;
				position: relative;
				height: 100%;
				
				.avatar{
					width: 48px;
					height: 48px;
					border-radius: 24px;
					background-color: #f8f8f8;
					margin-right: 10px;
				}
				
				text{
					font-size: 26px;
					color: #333333;
				}
					
				.b{
					color: #FF3660;
					padding-left: 10px;
				}
			}
		}
	}
	
.fanView {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 20px;
	padding-bottom: 30px;
	box-sizing: border-box;
	
	.fan-head {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		
		.fan-title {
			font-size: 32px;
		}
		.fan-btn {
			font-size: 24px;
			color: gray;
		}
	}
	.fan-detail {
		display: flex;
		flex-direction: row;
		border-radius: 10px;
		box-shadow: 0px 4px 20px 0px rgba(201,211,235,0.33);
		margin-top: 20px;
		padding-top: 20px;
		padding-bottom: 20px;
		.fan-a {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 32%;
			.fan-a-title {
				font-size: 24px;
				color: gray;
			}
			.fan-a-count {
				font-size: 28px;
			}
		}
	}
}

.chartsbox{
	.choose{
		border-top: 20px solid #f1f1f1;
		border-bottom: 20px solid #f1f1f1;
		height: 80px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.li{
			width: 25%;
			height: 100%;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24px;
			color: #666;
			
			&.last{
				width: 50%;
			}
			
			&.current{
				color: #FF264C;
				
				&:after{
					left: 35%;
					width: 30%;
					height: 4px;
					bottom: 0;
					content: "";
					display: block;
					position: absolute;
					background: #FF264C;
				}
			}
		}
	}
	
	.charts{
		width: 750px; 
		height:500px;
		background-color: #FFFFFF;
	}
}
</style>
